<template>
  <div>
    <ZgDialog
      v-model="visible"
      title="新增模板"
      top="10%"
      width="550px"
      @ok="save">
      <a-form :labelCol="{ span: 4 }" :wrapperCol="{ span: 20 }">
        <a-form-item label="文件名称" required>
          <ZgInput style="width:95%" v-model="obj.name"></ZgInput>
        </a-form-item>
        <a-form-item label="文件类型" required>
          <a-select
            style="width: 95%;"
            v-model="obj.type"
            placeholder="请选择文件类型">
            <a-select-option v-for="o in typeList" :key="o.value" :value="o.value">
              {{ o.label }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="文件排序" required>
          <ZgNumber style="width:45%" v-model="obj.sort"></ZgNumber>
        </a-form-item>
        <a-form-item label="上传文件" v-if="obj.type !== '占位符'">
          <div style="width:95%">
            <dragUpload :key="visible+'1'" :accept="obj.type=='word'?'.doc,.docx':'.xls,.xlsx'" @change="fileChange"/>
          </div>
        </a-form-item>
      </a-form>
    </ZgDialog>
  </div>
</template>
<script>
import storage from 'store'
import {
  ACCESS_TOKEN
} from '@/store/mutation-types'
import axios from 'axios'
import dragUpload from './upload.vue'
export default {
  components: {
    dragUpload
  },
  props: {
    tmplId: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      visible: false,
      typeList: [
        { value: 'word', label: 'word' },
        { value: 'excel', label: 'excel' },
        { value: '占位符', label: '占位符' }
      ],
      obj: {
        name: '',
        sort: 1,
        url: '',
        type: 'excel'
      },
      file: null
    }
  },
  methods: {
    open () {
      this.obj = {
        name: '',
        sort: 1,
        url: '',
        type: 'excel'
      }
      this.file = null
      this.visible = true
    },
    fileUpload (file) {
      this.obj.url = file.path
    },
    fileDel () {
      this.obj.url = ''
    },
    fileChange (fileList) {
      if (fileList.length) {
        this.file = fileList[0].originFileObj
      } else {
        this.file = null
      }
    },
    save () {
      if (this.obj.name.length === 0) {
        this.$warning({ title: '请输入文件名称' })
        return
      }
      if (this.obj.type.length === 0) {
        this.$warning({ title: '请选择文件类型' })
        return
      }
      if (this.obj.sort.length === 0) {
        this.$warning({ title: '请输入文件排序' })
        return
      }
      const formData = new FormData()
      formData.append('file', this.file)
      formData.append('name', this.obj.name)
      formData.append('type', this.obj.type)
      formData.append('sort', this.obj.sort)
      formData.append('tmplId', this.tmplId)
      const headers = {
        'Content-Type': 'multipart/form-data'
      }
      headers[ACCESS_TOKEN] = storage.get(ACCESS_TOKEN)

      axios.post(this.API_URL + '/zg-autoform/tmplFile/add', formData, {
          headers: headers
        }).then(res => {
          this.$emit('ok')
          this.visible = false
        }).catch(error => {
          console.log(error)
        })
    },
    onImportOk (file) {
      console.log(file)
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
